<template>
  <div class="users">
    <!-- 面包屑 -->
    <miAn-xie :betGao="betGao"></miAn-xie>
    <!-- 搜索 输入 添加 -->
    <el-card>
      <el-row>
        <el-col :span="10">
          <el-input
            v-model="query.query"
            placeholder="请输入内容"
            class="input-with-select"
          >
            <el-button
              @click="users_join"
              slot="append"
              icon="el-icon-search"
            ></el-button>
          </el-input>
        </el-col>

        <el-col :span="5" :offset="1">
          <el-button type="primary" @click="dialogFormVisible = true"
            >添加内容</el-button
          >
        </el-col>
      </el-row>
      <!-- 添加弹框 -->
      <el-dialog title="添加用户" :visible.sync="dialogFormVisible">
        <el-form :model="form" :rules="rules" ref="form">
          <el-form-item
            label="用户名"
            prop="username"
            :label-width="formLabelWidth"
          >
            <el-input v-model="form.username" autocomplete="off"></el-input>
          </el-form-item>
          <el-form-item
            label="密码"
            prop="password"
            :label-width="formLabelWidth"
          >
            <el-input v-model="form.password" autocomplete="off"></el-input>
          </el-form-item>
          <el-form-item label="邮箱" :label-width="formLabelWidth">
            <el-input v-model="form.email" autocomplete="off"></el-input>
          </el-form-item>
          <el-form-item label="电话" :label-width="formLabelWidth">
            <el-input v-model="form.mobile" autocomplete="off"></el-input>
          </el-form-item>
        </el-form>
        <div slot="footer" class="dialog-footer">
          <el-button @click="resetAddForm('form')">取 消</el-button>
          <el-button type="primary" @click="users_add('form')">确 定</el-button>
        </div>
      </el-dialog>
      <!-- 重新分配角色 -->
      <el-dialog title="添加用户" :visible.sync="dialogFormVi">
        <el-form :model="Forms" ref="Forms">
          <el-form-item label="当前用户" :label-width="formLabelWidth">
            <p>{{ Forms.username }}</p>
          </el-form-item>
          <el-form-item label="当前角色" :label-width="formLabelWidth">
            <template>
              <p>{{ Forms.role_name }}</p>
            </template>
          </el-form-item>
          <el-form-item label="分配角色" :label-width="formLabelWidth">
            <el-select v-model="Forms.region" placeholder="请选择">
              <el-option
                v-for="s in ros_list"
                :key="s.id"
                :label="s.roleName"
                :value="s.id"
              ></el-option>
            </el-select>
          </el-form-item>
        </el-form>
        <div slot="footer" class="dialog-footer">
          <el-button @click="dialogFormVi = false">取 消</el-button>
          <el-button type="primary" @click="users_distribution"
            >确 定</el-button
          >
        </div>
      </el-dialog>
      <!-- 表格 -->
      <el-table class="users_table" :data="list" :border="true">
        <el-table-column label="#" prop="id"></el-table-column>
        <el-table-column label="姓名" prop="username"></el-table-column>
        <el-table-column label="邮箱" prop="email"></el-table-column>
        <el-table-column label="电话" prop="mobile"></el-table-column>
        <el-table-column label="角色" prop="role_name"></el-table-column>
        <el-table-column label="状态">
          <template slot-scope="scope">
            <el-switch
              @change="users_switch(scope.row)"
              v-model="scope.row.mg_state"
              active-color="#13ce66"
              inactive-color="#ff4949"
            >
            </el-switch>
          </template>
        </el-table-column>
        <el-table-column label="操作" width="200px">
          <template slot-scope="scope">
            <el-button
              @click="users_edit(scope.row.id)"
              type="primary"
              icon="el-icon-edit"
              circle
            ></el-button>
            <el-button
              @click="users_puts(scope.row)"
              type="warning"
              icon="el-icon-s-tools"
              circle
            ></el-button>
            <el-button
              @click="users_sc(scope.row.id)"
              type="danger"
              icon="el-icon-delete"
              circle
            ></el-button>
          </template>
        </el-table-column>
      </el-table>
      <!-- 分页 -->
      <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="query.pagenum"
        :page-sizes="[2, 4, 6, 10]"
        :page-size="query.pagesize"
        layout="total, sizes, prev, pager, next, jumper"
        :total="total"
      >
      </el-pagination>
      <!-- 编辑用户 -->
      <el-dialog title="编辑用户" :visible.sync="DialogFormVisible">
        <el-form :model="form" ref="form">
          <el-form-item
            label="用户名"
            prop="username"
            :label-width="formLabelWidth"
          >
            <el-input
              v-model="form.username"
              autocomplete="off"
              :disabled="true"
            ></el-input>
          </el-form-item>
          <el-form-item label="邮箱" :label-width="formLabelWidth">
            <el-input v-model="form.email" autocomplete="off"></el-input>
          </el-form-item>
          <el-form-item label="电话" :label-width="formLabelWidth">
            <el-input v-model="form.mobile" autocomplete="off"></el-input>
          </el-form-item>
        </el-form>
        <div slot="footer" class="dialog-footer">
          <el-button @click="users_reset">取 消</el-button>
          <el-button type="primary" @click="users_adds">确 定</el-button>
        </div>
      </el-dialog>
    </el-card>
  </div>
</template>
<script>
import {
  getUsers,
  postUsers,
  deleteUsers,
  putUsers,
  putUser,
  getUser,
  users_put,
  users_get,
} from "@/http/user/user";
import { roles_Roles } from "@/http/rights/roles";
export default {
  data() {
    return {
      // 面包屑
      betGao:[
        {
          'path':'/home',
          'title':'首页'
        },
        {
          'path':'/users',
          'title':'用户管理'
        },
        {
          'path':'/users',
          'title':'用户列表'
        },
      ],
      list: [],
      query: {
        query: "",
        pagenum: 1,
        pagesize: 2,
      },
      value: true,
      total: 0,
      dialogFormVisible: false,
      DialogFormVisible: false,
      form: {
        username: "",
        password: "",
        email: "",
        mobile: "",
      },
      Form: {
        id: "",
      },
      formLabelWidth: "100px",
      rules: {
        username: [{ required: true, message: "请输入用户名" }],
        password: [{ required: true, message: "请输入密码" }],
      },
      // 分配角色
      dialogFormVi: false,
      Forms: {
        username: "",
        rid: "",
        id: "",
        role_name: "",
        region:''
      },
      ros_list: [],
    };
  },
  watch: {
    list: {
      handler(n) {
        if (this.query.pagenum > 1 && n.length == 0) {
          this.query.pagenum -= 1;
          this.GetUsers();
        }
      },
      deep: true, //深度
      immediate: true, //立即
    },
  },
  //挂载完毕后获取dom元素
  mounted() {
    this.GetUsers();
  },
  methods: {
    // 每页条数
    handleSizeChange(val) {
      //   console.log(`每页 ${val} 条`);
      this.query.pagesize = val;
      this.GetUsers();
    },
    // 当前每页
    handleCurrentChange(val) {
      //   console.log(`当前页: ${val}`);
      this.query.pagenum = val;
      this.GetUsers();
    },
    // 获取数据
    async GetUsers() {
      let res = await getUsers(this.query);
      // console.log(res);
      this.list = res.data.users;
      this.total = res.data.total;
      // this.$message.success(res.meta.msg);
    },
    // 添加用户
    users_add(formName) {
      this.$refs[formName].validate(async (valid) => {
        if (valid) {
          let res = await postUsers(this.form);
          // console.log(res);
          if (res.meta.status == 201) {
            this.dialogFormVisible = false;
            this.query.pagenum = 1;
            this.$refs[formName].resetFields();
            this.form.email = "";
            this.form.mobile = "";
            // this.$message.success(res.meta.msg);
            this.GetUsers();
          } else {
          }
        } else {
          return false;
        }
      });
    },
    // 添加------删除
    resetAddForm(formName) {
      this.$refs[formName].resetFields();
      this.dialogFormVisible = false;
    },
    // 搜索
    // users_join() {
    //   this.GetUsers();
    // },
    users_join: _.debounce(function () {
      this.query.pagenum = 1;
      this.GetUsers();
    }, 2000),
    // 删除
    async users_sc(id) {
      let res = await deleteUsers(id);
      // let yeSgu = Math.ceil((this.total - 1) / this.query.pagesize);
      // console.log(yeSgu);
      // let cuRn = this.query.pagenum > yeSgu ? yeSgu : this.query.pagesize;
      // console.log(cuRn);
      // this.query.pagenum = yeSgu < 1 ? 1 : cuRn;
      // console.log(this.query.pagenum);
      // this.$message.success(res.meta.msg);
      this.GetUsers();
    },
    // 状态改变
    async users_switch(obj) {
      // console.log(obj);
      let res = await putUsers(obj.id, obj.mg_state);
      // this.$message.success(res.meta.msg);
      // console.log(res);
      this.GetUsers();
    },
    // 查询
    async users_edit(id) {
      this.DialogFormVisible = true;
      let res = await getUser(id);
      // this.$message.success(res.meta.msg);
      console.log(res);
      this.form.username = res.data.username;
      this.form.email = res.data.email;
      this.form.mobile = res.data.mobile;
      this.Form.id = id;
    },
    users_reset() {
      this.form.username = "";
      this.form.email = "";
      this.form.mobile = "";
      this.DialogFormVisible = false;
    },
    async users_adds() {
      let { email, mobile } = this.form;
      let res = await putUser(this.Form.id, { email, mobile });
      console.log(res);
      this.DialogFormVisible = false;
      // this.$message.success(res.meta.msg);

      this.GetUsers();
      this.form.username = "";
      this.form.email = "";
      this.form.mobile = "";
    },
    // // 获取角色列表
    // async roles_Role() {
    //   let res = await roles_Roles();
    //   console.log(res);
    //   this.ros_list = res.data;
    // },
    // // 分配角色
    // users_puts(obj) {
    //   this.dialogFormVi = true;
    //    this.roles_Role();
    //   console.log(obj);
    //   let { username, role_name,id } = obj;
    //   this.Forms.username = username;
    //   this.Forms.role_name = role_name;
    //   this.Ms.id = id;

    // },
    // async users_distribution(){
    //   console.log(this.Ms.region);
    //   console.log(this.Ms.id);
    //     let res = await users_put(this.Ms.id,this.Ms.region)
    //     console.log(res);
    //     this.dialogFormVi = false;
    // }

    // 获取角色列表
    async roles_Role() {
      let res = await roles_Roles();
      // console.log(res);
      this.ros_list = res.data;
    },
    // 分配角色
    async users_puts(obj) {
      this.dialogFormVi = true;
      this.roles_Role();
      let res = await users_get(obj.id);
      // console.log(res);
      let { username, rid, id } = res.data;
      this.Forms.username = username;
      this.Forms.rid = rid;
      this.Forms.id = id;
      this.Forms.role_name = obj.role_name;
      // console.log( this.Forms);
    },
    async users_distribution() {
      console.log(this.Forms.id);
      console.log(this.Forms.rid);
      let res = await users_put(this.Forms.id,{rid:this.Forms.rid})
      console.log(res);
      this.dialogFormVi = false;
      this.roles_Role();
    },
  },
};
</script>
<style lang="scss" scoped>
.input-with-select {
  background-color: #fff;
}
.users_table {
  margin: 20px 0;
}
</style>